<!-- 创建时间: 2021年06月22日 星期二 15:05 -->
<template>
    <div class="pageOption_container">
        <!-- 标题 -->
        <center>
            <h3>{{ mapperInfo.title }}</h3>
        </center>
        <!-- 操作栏 -->
        <el-row>
            <div class="grid-content bg-purple-dark">
                <el-col :md="12" :sm="12" :xs="15" style="display: flex;">
                    <el-tag
                        v-if="userType == 'student'"
                        type="info"
                        style="margin-right:10px;"
                        >{{ classNumber }}</el-tag
                    >
                    <el-tag v-if="userType == 'student'" type="info">{{
                        className
                    }}</el-tag>
                    <!-- :page-count="pageInfo.totalPage" -->
                    <el-pagination
                        :page-size="pageInfo.pageSize"
                        :current-page.sync="pageInfo.currentPage"
                        :total="pageInfo.totalPage"
                        background
                        layout="total, prev, pager, next"
                    >
                    </el-pagination>
                </el-col>
                <el-col :md="12" :sm="12" :xs="9" style="text-align:right;">
                    <el-button
                        type="primary"
                        round
                        @click="addStudentMask = true"
                        ><i class="el-icon-plus">添加用户</i>
                    </el-button>
                </el-col>
            </div>
        </el-row>
        <!-- Notification 通知 -->
        <el-button
            plain
            @click="openInfoTips"
            style="display: none"
        ></el-button>
        <!-- 遮罩 -->
        <div
            class="mask"
            v-show="addStudentMask"
            @click="addStudentMask = !addStudentMask"
        ></div>

        <!-- ====================学生数据展示区====================== -->
        <div v-if="userType == 'student'">
            <!-- 学生列表  -->
            <el-table
                :data="
                    tableData.slice(
                        (pageInfo.currentPage - 1) * pageInfo.pageSize,
                        pageInfo.currentPage * pageInfo.pageSize
                    )
                "
                border
                style="width: 100%"
            >
                <el-table-column type="index" width="50"> </el-table-column>
                <el-table-column prop="studentName" label="姓名" width="180">
                    <template scope="scope">
                        <span v-show="!scope.row.isEdit">{{
                            scope.row.studentName
                        }}</span>
                        <el-input
                            v-show="scope.row.isEdit"
                            v-model="scope.row.studentName"
                            name="studentName"
                            required
                            clearable
                        ></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="studentNumber" label="学号" width="180">
                    <template scope="scope">
                        <span v-show="!scope.row.isEdit">{{
                            scope.row.studentNumber
                        }}</span>
                        <el-input
                            v-show="scope.row.isEdit"
                            :value="scope.row.studentNumber"
                            name="studentNumber"
                            required
                            clearable
                            disabled
                        ></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="studentPass" label="密码" width="180">
                    <template scope="scope">
                        <span v-show="!scope.row.isEdit">******</span>
                        <el-input
                            v-show="scope.row.isEdit"
                            v-model="scope.row.studentPass"
                            name="studentPass"
                            required
                            clearable
                            show-password
                            type="password"
                        ></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="studentEmail" label="邮箱">
                    <template scope="scope">
                        <span v-show="!scope.row.isEdit">{{
                            scope.row.studentEmail
                        }}</span>
                        <el-input
                            v-show="scope.row.isEdit"
                            v-model="scope.row.studentEmail"
                            name="studentEmail"
                            required
                            clearable
                            type="email"
                        ></el-input>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="150">
                    <template slot-scope="scope">
                        <el-button
                            size="mini"
                            type="text"
                            @click="
                                handleEdit(
                                    scope.row,
                                    (pageInfo.currentPage - 1) *
                                        pageInfo.pageSize +
                                        scope.$index
                                )
                            "
                        >
                            {{ scope.row.isEdit ? "取消" : "编辑" }}
                        </el-button>
                        <el-button
                            size="mini"
                            type="text"
                            @click="saveEdit(scope.row)"
                            v-show="scope.row.isEdit"
                        >
                            保存
                        </el-button>
                        <el-popconfirm
                            :title="
                                '你确定要删除学生【' +
                                    scope.row[mapperInfo.userNameKey] +
                                    '】吗？'
                            "
                            @confirm="
                                delStudents(
                                    scope.row,
                                    (pageInfo.currentPage - 1) *
                                        pageInfo.pageSize +
                                        scope.$index
                                )
                            "
                        >
                            <el-button type="text" size="small" slot="reference"
                                >删除</el-button
                            >
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
            <transition name="el-zoom-in-center">
                <el-card
                    class="transition-box"
                    shadow="always"
                    v-show="addStudentMask"
                >
                    <el-row style="margin-bottom:12px;">
                        <el-col :md="12">
                            <el-link
                                type="primary"
                                :href="$ROOT + '/downloadTemplate?type=student'"
                                >下载模板</el-link
                            >
                            <input
                                type="file"
                                id="file"
                                @change="loadRemoteFile()"
                                style="display: none"
                            />
                            <el-link type="primary" @click.prevent="selectFile"
                                >批量添加</el-link
                            >
                            <el-link
                                type="primary"
                                @click.prevent="selectFileClear"
                                >清空</el-link
                            >
                        </el-col>
                        <el-col :md="12" style="text-align:right;">
                            <el-tooltip
                                class="item"
                                effect="dark"
                                content="所有操作都需要上传到后端"
                                placement="top-end"
                            >
                                <el-button
                                    type="primary"
                                    round
                                    @click="addStudents"
                                    >提交</el-button
                                >
                            </el-tooltip>
                        </el-col>
                    </el-row>
                    <el-form
                        label-position="right"
                        @submit.native.prevent
                        inline
                    >
                        <el-table
                            :data="
                                formLabelAlign.slice(
                                    (excelInfo.currentPage - 1) *
                                        excelInfo.pageSize,
                                    excelInfo.currentPage * excelInfo.pageSize
                                )
                            "
                            border
                            stripe
                            style="width: 100%"
                        >
                            <el-table-column type="index" width="50">
                            </el-table-column>
                            <el-table-column
                                prop="studentName"
                                label="姓名"
                                width="180"
                            >
                                <template scope="scope">
                                    <el-input
                                        v-model="scope.row.studentName"
                                        name="studentName"
                                        autofocus
                                        required
                                        clearable
                                    >
                                    </el-input>
                                </template>
                            </el-table-column>
                            <el-table-column
                                prop="studentNumber"
                                label="学号"
                                width="180"
                            >
                                <template scope="scope">
                                    <el-input
                                        v-model="scope.row.studentNumber"
                                        name="studentNumber"
                                        required
                                        clearable
                                    >
                                    </el-input>
                                </template>
                            </el-table-column>
                            <el-table-column
                                prop="studentPass"
                                label="初始密码"
                                width="180"
                            >
                                <template scope="scope">
                                    <el-input
                                        v-model="scope.row.studentPass"
                                        name="studentPass"
                                        required
                                        disabled
                                    >
                                    </el-input>
                                </template>
                            </el-table-column>
                            <el-table-column
                                prop="studentEmail"
                                label="邮箱"
                                width="180"
                            >
                                <template scope="scope">
                                    <el-input
                                        v-model="scope.row.studentEmail"
                                        type="email"
                                        name="studentEmail"
                                        required
                                        clearable
                                    >
                                    </el-input>
                                </template>
                            </el-table-column>
                            <el-table-column fixed="right" label="操作">
                                <template slot-scope="scope">
                                    <el-button
                                        size="mini"
                                        type="text"
                                        @click="
                                            managerList(
                                                (excelInfo.currentPage - 1) *
                                                    excelInfo.pageSize +
                                                    scope.$index,
                                                'cle'
                                            )
                                        "
                                        >清空
                                    </el-button>
                                    <el-button
                                        size="mini"
                                        type="text"
                                        @click="
                                            managerList(
                                                (excelInfo.currentPage - 1) *
                                                    excelInfo.pageSize +
                                                    scope.$index,
                                                'del'
                                            )
                                        "
                                        >清除
                                    </el-button>
                                    <el-button
                                        size="mini"
                                        type="text"
                                        @click="
                                            managerList(
                                                (excelInfo.currentPage - 1) *
                                                    excelInfo.pageSize +
                                                    scope.$index,
                                                'add'
                                            )
                                        "
                                        >添加
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <el-input
                            type="submit"
                            id="submit"
                            style="display: none"
                        ></el-input>
                    </el-form>
                    <el-pagination
                        style="display: flex; justify-content: center;"
                        :page-size="excelInfo.pageSize"
                        :current-page.sync="excelInfo.currentPage"
                        :total="excelInfo.totalPage"
                        background
                        hide-on-single-page
                        layout="prev, pager, next"
                    >
                    </el-pagination>
                </el-card>
            </transition>
        </div>

        <!-- ====================教师数据展示区====================== -->
        <div v-if="userType == 'teacher'">
            <el-table
                v-if="userType == 'teacher'"
                :data="
                    tableData.slice(
                        (pageInfo.currentPage - 1) * pageInfo.pageSize,
                        pageInfo.currentPage * pageInfo.pageSize
                    )
                "
                border
                style="width: 100%"
            >
                <el-table-column type="index" width="50"> </el-table-column>
                <el-table-column prop="teacherName" label="姓名" width="180">
                    <template scope="scope">
                        <span v-show="!scope.row.isEdit">{{
                            scope.row.teacherName
                        }}</span>
                        <el-input
                            v-show="scope.row.isEdit"
                            v-model="scope.row.teacherName"
                            name="teacherName"
                            required
                            clearable
                        ></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="teacherNumber" label="工号" width="180">
                    <template scope="scope">
                        <span v-show="!scope.row.isEdit">{{
                            scope.row.teacherNumber
                        }}</span>
                        <el-input
                            v-show="scope.row.isEdit"
                            :value="scope.row.teacherNumber"
                            name="teacherNumber"
                            required
                            clearable
                            disabled
                        ></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="teacherPass" label="密码" width="180">
                    <template scope="scope">
                        <span v-show="!scope.row.isEdit">******</span>
                        <el-input
                            v-show="scope.row.isEdit"
                            v-model="scope.row.teacherPass"
                            name="teacherPass"
                            required
                            clearable
                            show-password
                            type="password"
                        ></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="teacherEmail" label="邮箱">
                    <template scope="scope">
                        <span v-show="!scope.row.isEdit">{{
                            scope.row.teacherEmail
                        }}</span>
                        <el-input
                            v-show="scope.row.isEdit"
                            v-model="scope.row.teacherEmail"
                            name="teacherEmail"
                            required
                            clearable
                            type="email"
                        ></el-input>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="150">
                    <template slot-scope="scope">
                        <el-button
                            size="mini"
                            type="text"
                            @click="
                                handleEdit(
                                    scope.row,
                                    (pageInfo.currentPage - 1) *
                                        pageInfo.pageSize +
                                        scope.$index
                                )
                            "
                        >
                            {{ scope.row.isEdit ? "取消" : "编辑" }}
                        </el-button>
                        <el-button
                            size="mini"
                            type="text"
                            @click="saveEdit(scope.row)"
                            v-show="scope.row.isEdit"
                        >
                            保存
                        </el-button>
                        <el-popconfirm
                            :title="
                                '你确定要删除教师【' +
                                    scope.row[mapperInfo.userNameKey] +
                                    '】吗？'
                            "
                            @confirm="
                                delStudents(
                                    scope.row,
                                    (pageInfo.currentPage - 1) *
                                        pageInfo.pageSize +
                                        scope.$index
                                )
                            "
                        >
                            <el-button type="text" size="small" slot="reference"
                                >删除</el-button
                            >
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
            <transition name="el-zoom-in-center">
                <el-card
                    class="transition-box"
                    shadow="always"
                    v-show="addStudentMask"
                >
                    <el-row style="margin-bottom:12px;">
                        <el-col :md="12">
                            <el-link
                                type="primary"
                                :href="$ROOT + '/downloadTemplate?type=teacher'"
                                >下载模板</el-link
                            >
                            <input
                                type="file"
                                id="file"
                                @change="loadRemoteFile()"
                                style="display: none"
                            />
                            <el-link type="primary" @click.prevent="selectFile"
                                >批量添加</el-link
                            >
                            <el-link
                                type="primary"
                                @click.prevent="selectFileClear"
                                >清空</el-link
                            >
                        </el-col>
                        <el-col :md="12" style="text-align:right;">
                            <el-tooltip
                                class="item"
                                effect="dark"
                                content="所有操作都需要上传到后端"
                                placement="top-end"
                            >
                                <el-button
                                    type="primary"
                                    round
                                    @click="addStudents"
                                    >提交</el-button
                                >
                            </el-tooltip>
                        </el-col>
                    </el-row>
                    <el-form
                        label-position="right"
                        @submit.native.prevent
                        inline
                    >
                        <el-table
                            :data="
                                formLabelAlign.slice(
                                    (excelInfo.currentPage - 1) *
                                        excelInfo.pageSize,
                                    excelInfo.currentPage * excelInfo.pageSize
                                )
                            "
                            border
                            stripe
                            style="width: 100%"
                        >
                            <el-table-column type="index" width="50">
                            </el-table-column>
                            <el-table-column
                                prop="teacherName"
                                label="姓名"
                                width="180"
                            >
                                <template scope="scope">
                                    <el-input
                                        v-model="scope.row.teacherName"
                                        name="teacherName"
                                        autofocus
                                        required
                                        clearable
                                    >
                                    </el-input>
                                </template>
                            </el-table-column>
                            <el-table-column
                                prop="teacherNumber"
                                label="工号"
                                width="180"
                            >
                                <template scope="scope">
                                    <el-input
                                        v-model="scope.row.teacherNumber"
                                        name="teacherNumber"
                                        required
                                        clearable
                                    >
                                    </el-input>
                                </template>
                            </el-table-column>
                            <el-table-column
                                prop="teacherPass"
                                label="初始密码"
                                width="180"
                            >
                                <template scope="scope">
                                    <el-input
                                        v-model="scope.row.teacherPass"
                                        name="teacherPass"
                                        required
                                        disabled
                                    >
                                    </el-input>
                                </template>
                            </el-table-column>
                            <el-table-column
                                prop="teacherEmail"
                                label="邮箱"
                                width="180"
                            >
                                <template scope="scope">
                                    <el-input
                                        v-model="scope.row.teacherEmail"
                                        type="email"
                                        name="teacherEmail"
                                        required
                                        clearable
                                    >
                                    </el-input>
                                </template>
                            </el-table-column>
                            <el-table-column fixed="right" label="操作">
                                <template slot-scope="scope">
                                    <el-button
                                        size="mini"
                                        type="text"
                                        @click="
                                            managerList(
                                                (excelInfo.currentPage - 1) *
                                                    excelInfo.pageSize +
                                                    scope.$index,
                                                'cle'
                                            )
                                        "
                                        >清空
                                    </el-button>
                                    <el-button
                                        size="mini"
                                        type="text"
                                        @click="
                                            managerList(
                                                (excelInfo.currentPage - 1) *
                                                    excelInfo.pageSize +
                                                    scope.$index,
                                                'del'
                                            )
                                        "
                                        >清除
                                    </el-button>
                                    <el-button
                                        size="mini"
                                        type="text"
                                        @click="
                                            managerList(
                                                (excelInfo.currentPage - 1) *
                                                    excelInfo.pageSize +
                                                    scope.$index,
                                                'add'
                                            )
                                        "
                                        >添加
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <el-input
                            type="submit"
                            id="submit"
                            style="display: none"
                        ></el-input>
                    </el-form>
                    <el-pagination
                        style="display: flex; justify-content: center;"
                        :page-size="excelInfo.pageSize"
                        :current-page.sync="excelInfo.currentPage"
                        :total="excelInfo.totalPage"
                        background
                        hide-on-single-page
                        layout="prev, pager, next"
                    >
                    </el-pagination>
                </el-card>
            </transition>
        </div>
    </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
    //import引入的组件需要注入到对象中才能使用
    components: {},
    props: ["userType"],
    data() {
        //这里存放数据
        return {
            mapperInfo: {
                title: "",
                userNameKey: "",
                userNumberKey: "",
                userPassKey: "",
                userEmailKey: "",
                requestBody: {
                    tableName: "",
                },
            },
            // 页面分页
            pageInfo: {
                currentPage: 1,
                pageSize: 20,
                totalPage: 0,
            },
            // excel添加信息时分页
            excelInfo: {
                currentPage: 1,
                pageSize: 10,
                totalPage: 0,
            },
            // 状态为学生时独有
            classNumber: this.$route.query[0], // 班级号
            className: this.$route.query[1], // 班级名称
            // 信息存储
            tableData: [], // 总列表信息
            tempTableDate: {}, // 临时保存编辑中的表原数据
            addStudentMask: false, // 添加遮罩
            formLabelAlign: [],
        };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {
        "pageInfo.currentPage": function(val) {
            this.autoGetUserList();
        },
    },
    //方法集合
    methods: {
        pageInit() {
            if (this.userType == "teacher") {
                this.mapperInfo = {
                    title: "教师管理",
                    userNameKey: "teacherName",
                    userNumberKey: "teacherNumber",
                    userPassKey: "teacherPass",
                    userEmailKey: "teacherEmail",
                    requestBody: {
                        tableName: "teacher",
                    },
                };
                this.formLabelAlign = [
                    {
                        teacherName: "",
                        teacherNumber: "",
                        teacherPass: "123456",
                        teacherEmail: "",
                        isEdit: false,
                    },
                ];
            } else if (this.userType == "student") {
                this.mapperInfo = {
                    title: "学生管理",
                    userNameKey: "studentName",
                    userNumberKey: "studentNumber",
                    userPassKey: "studentPass",
                    userEmailKey: "studentEmail",
                    requestBody: {
                        tableName: this.classNumber,
                    },
                };
                this.formLabelAlign = [
                    {
                        studentName: "",
                        studentNumber: "",
                        studentPass: "123456",
                        studentEmail: "",
                        isEdit: false,
                    },
                ];
            }
        },
        // 编辑数据项状态转换
        handleEdit(row, index) {
            for (let i = 0; i < this.tableData.length; i++) {
                if (i == index) continue;
                this.tableData[i].isEdit = false;
            }
            row.isEdit = !row.isEdit;
            if (row.isEdit) {
                this.tempTableDate = JSON.stringify(row);
            } else {
                let tempTableDate = JSON.parse(this.tempTableDate);
                row = tempTableDate;
                row.isEdit = false;
                this.tempTableDate = "";
            }
            this.$forceUpdate();
        },
        // 自动获取班级学生信息
        autoGetUserList() {
            let loading = this.$loading({
                lock: true,
                text: "数据加载中,请稍等...",
                spinner: "el-icon-loading",
                background: "rgba(0, 0, 0, 0.7)",
            });
            this.$http
                .post("queryUsers", {
                    classNumber: this.mapperInfo.requestBody.tableName,
                    pageNum: this.pageInfo.currentPage,
                    pageSize: this.pageInfo.pageSize,
                })
                .then((res) => {
                    loading.close();
                    if (res.body.size == 0) return;
                    let start = (res.body.pageNum - 1) * res.body.pageSize,
                        end =
                            res.body.pageNum * res.body.pageSize >
                            res.body.total
                                ? res.body.total
                                : res.body.pageNum * res.body.pageSize;
                    for (let i = start, j = 0; i < end; i++) {
                        this.tableData[i] = res.body.list[j++];
                        this.tableData[i]["isEdit"] = false;
                    }
                    this.pageInfo.totalPage = res.body.total;
                    this.$forceUpdate();
                })
                .catch((err) => {
                    loading.close();
                    this.$message({
                        message: err + " 网站访问出错啦，请稍后重试。",
                        type: "error",
                    });
                });
        },

        // 保存修改学生信息
        saveEdit(row) {
            Object.keys(row).forEach((val) => {
                if (val == "") {
                    this.openInfoTips("温馨提示", "用户信息有误", "info", 4000);
                    return;
                }
            });
            let arr = new Array();
            arr.push(row);
            let loading = this.$loading({
                lock: true,
                text: "数据加提交中,请稍等...",
                spinner: "el-icon-loading",
                background: "rgba(0, 0, 0, 0.7)",
            });
            this.$http
                .post("upUsers", {
                    classNumber: this.mapperInfo.requestBody.tableName,
                    data: JSON.stringify(arr),
                })
                .then((res) => {
                    if (res.body != -1 && res.body == arr.length) {
                        row.isEdit = false;
                        this.openInfoTips(
                            "更新",
                            "用户【" +
                                row[this.mapperInfo.userNameKey] +
                                "】信息<b style='color:green;'>更新成功</b>",
                            "success",
                            4000
                        );
                    } else {
                        this.openInfoTips(
                            "更新",
                            "用户信息<b style='color:red;'>更新失败</b>",
                            "error",
                            4000
                        );
                    }
                    loading.close();
                })
                .catch((err) => {
                    loading.close();
                    this.$message({
                        message: err.status + " 服务器访问出错了。。。",
                        type: "error",
                    });
                });
        },
        // 删除学生信息
        delStudents(row, index) {
            let arr = new Array();
            let key = this.mapperInfo.userNumberKey;
            arr.push(row[key]);
            let loading = this.$loading({
                lock: true,
                text: "数据加提交中,请稍等...",
                spinner: "el-icon-loading",
                background: "rgba(0, 0, 0, 0.7)",
            });
            this.$http
                .post("delUsers", {
                    classNumber: this.mapperInfo.requestBody.tableName,
                    studentNumber: JSON.stringify(arr),
                })
                .then((res) => {
                    if (res.body != -1 && res.body == arr.length) {
                        this.tableData.splice(index, 1);
                        this.openInfoTips(
                            "删除",
                            "【" +
                                res.body +
                                "】位用户信息<b style='color:green;'>删除成功</b>",
                            "success",
                            4000
                        );
                    } else {
                        this.openInfoTips(
                            "删除",
                            "用户信息<b style='color:red;'>删除失败</b>",
                            "error",
                            4000
                        );
                    }
                    loading.close();
                })
                .catch((err) => {
                    loading.close();
                    this.$message({
                        message: err.status + " 服务器访问出错了。。。",
                        type: "error",
                    });
                });
        },
        // 将添加学生信息
        addStudents() {
            let loading = this.$loading({
                lock: true,
                text: "数据加提交中,请稍等...",
                spinner: "el-icon-loading",
                background: "rgba(0, 0, 0, 0.7)",
            });
            if (
                this.formLabelAlign.length != 0 &&
                this.checkFormLabelAlignIsExistsNull()
            ) {
                this.$http
                    .post("addUsers", {
                        classNumber: this.mapperInfo.requestBody.tableName,
                        updateArr: JSON.stringify(this.formLabelAlign),
                    })
                    .then((res) => {
                        loading.close();
                        if (
                            res.body != -1 &&
                            res.body == this.formLabelAlign.length
                        ) {
                            this.tableData = this.tableData.concat(
                                this.formLabelAlign
                            );
                            this.pageInfo.totalPage = this.tableData.length;
                            this.addStudentMask = false;
                            this.selectFileClear();
                            this.openInfoTips(
                                "添加",
                                "【" +
                                    res.body +
                                    "】位用户信息<b style='color:green;'>添加成功</b>",
                                "success",
                                4000
                            );
                        } else {
                            this.openInfoTips(
                                "添加",
                                "用户信息<b style='color:red;'>添加失败</b>",
                                "error",
                                4000
                            );
                        }
                    })
                    .catch((err) => {
                        loading.close();
                        this.$message({
                            message: err.status + " 服务器访问出错了。。。",
                            type: "error",
                        });
                    });
            } else {
                loading.close();
                this.openInfoTips("温馨提示", "用户信息有误", "info", 4000);
            }
        },
        checkFormLabelAlignIsExistsNull() {
            let arr = this.formLabelAlign;
            for (let i = 0; i < arr.length; i++) {
                if (
                    arr[i][this.mapperInfo.userNameKey] == "" ||
                    arr[i][this.mapperInfo.userNumberKey] == "" ||
                    arr[i][this.mapperInfo.userPassKey] == "" ||
                    arr[i][this.mapperInfo.userEmailKey] == ""
                )
                    return false;
            }
            return true;
        },
        // 在添加学生信息栏内 增加空白学生列表
        managerList(index, options) {
            /**
             * 语法 array.splice(index,howmany,item1,.....,itemX)
             * index 必需。规定从何处添加/删除元素。该参数是开始插入和（或）删除的数组元素的下标，必须是数字。
             * howmany 必需。规定应该删除多少元素。必须是数字，但可以是 "0"。如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素。
             * item1, ..., itemX 可选。要添加到数组的新元素
             * Type 描述
             * Array 如果从 arrayObject 中删除了元素，则返回的是含有被删除的元素的数组。
             */

            switch (options) {
                case "add":
                    if (this.userType == "student") {
                        this.formLabelAlign.splice(index + 1, 0, {
                            studentName: "",
                            studentNumber: "",
                            studentPass: "123456",
                            studentEmail: "",
                            isEdit: true,
                        });
                    } else if (this.userType == "teacher") {
                        this.formLabelAlign.splice(index + 1, 0, {
                            teacherName: "",
                            teacherNumber: "",
                            teacherPass: "123456",
                            teacherEmail: "",
                            isEdit: true,
                        });
                    }
                    break;
                case "del":
                    if (this.formLabelAlign.length != 1) {
                        this.formLabelAlign.splice(index, 1);
                        this.excelInfo.totalPage -= 1;
                    }
                    break;
                case "cle":
                    Object.keys(this.formLabelAlign[index]).forEach((item) => {
                        if (item != this.mapperInfo.userPassKey)
                            this.formLabelAlign[index][item] = "";
                        else this.formLabelAlign[index][item] = "123456";
                    });
                    break;
                default:
                    break;
            }
        },
        // 清空所有学生导入
        selectFileClear() {
            document.getElementById("file").value = "";
            if (this.userType == "student") {
                this.formLabelAlign = [
                    {
                        studentName: "",
                        studentNumber: "",
                        studentPass: "123456",
                        studentEmail: "",
                        isEdit: true,
                    },
                ];
            } else if (this.userType == "teacher") {
                this.formLabelAlign = [
                    {
                        teacherName: "",
                        teacherNumber: "",
                        teacherPass: "123456",
                        teacherEmail: "",
                        isEdit: true,
                    },
                ];
            }
            this.excelInfo = {
                currentPage: 1,
                pageSize: 10,
                totalPage: 0,
            };
        },
        // 批量导入文件
        selectFile() {
            document.getElementById("file").click();
        },
        loadRemoteFile() {
            let loading = this.$loading({
                lock: true,
                text: "数据加载中,请稍等...",
                spinner: "el-icon-loading",
                background: "rgba(0, 0, 0, 0.7)",
            });
            setTimeout(() => {
                let url = document.getElementById("file");
                let _this = this;
                this.readWorkbookFromLocalFile(url.files[0], function(
                    workbook
                ) {
                    _this.outputWorkbook(workbook);
                    loading.close();
                });
            }, 100);
        },
        readWorkbookFromLocalFile(file, callback) {
            var reader = new FileReader();
            let _this = this;
            reader.onload = function(e) {
                var data = e.target.result;
                var workbook = _this.$XLSX.read(data, { type: "binary" });
                if (callback) callback(workbook);
            };
            reader.readAsBinaryString(file);
        },
        outputWorkbook(workbook) {
            let sheetNames = workbook.SheetNames; // 工作表名称集合
            let _this = this;
            sheetNames.forEach((name) => {
                let worksheet = workbook.Sheets[name]; // 只能通过工作表名称来获取指定工作表
                let csv = _this.$XLSX.utils.sheet_to_csv(worksheet);
                let rows = csv.split("\n");
                rows.splice(0, 1); //删除第一行 表头行
                rows.pop(); //删除最后一行 空白数据行
                rows.forEach(function(value, index) {
                    let row = value.split(",");
                    if (
                        row[0] != "" &&
                        row[1] != "" &&
                        row[2] != "" &&
                        row[3] != ""
                    ) {
                        if (_this.userType == "student") {
                            _this.formLabelAlign.push({
                                studentName: row[0],
                                studentNumber: row[1],
                                studentPass: row[2],
                                studentEmail: row[3],
                                isEdit: false,
                            });
                        } else if (_this.userType == "teacher") {
                            _this.formLabelAlign.push({
                                teacherName: row[0],
                                teacherNumber: row[1],
                                teacherPass: row[2],
                                teacherEmail: row[3],
                                isEdit: false,
                            });
                        }
                    }
                });
                this.excelInfo.totalPage = this.formLabelAlign.length;
            });
            document.getElementById("file").value = "";
        },
        // 弹出框
        openInfoTips(title, message, type, duration) {
            this.$notify({
                title: title,
                message: message,
                type: type,
                duration: duration,
                dangerouslyUseHTMLString: true,
            });
        },
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
        this.pageInit();
        this.autoGetUserList();
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {},
    //当data中定义的数据有变化时就会加载updated方法
    updated() {},
};
</script>

<style lang="scss" scoped>
//@import url(); 引入公共css类
.pageOption_container {
    margin-bottom: 15px;
    .grid-content {
        border-radius: 4px;
        min-height: 36px;
        padding: 10px 10px;
    }
    .bg-purple-dark {
        background: #99a9bf;
    }

    .mask {
        position: fixed;
        left: 0;
        top: 0;
        z-index: 100;
        width: 100%;
        height: 100%;
        background: #000;
        opacity: 0.5;
    }
    .transition-box {
        width: 980px;
        height: 500px;
        background: #fff;
        z-index: 101;
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        overflow: auto;
    }
}
</style>
